<template>
	<view>
		<!-- 跳转搜索 -->
		<view class="head">
			<view class="head-left">
				<image src="../../static/shopping/top.png" mode="aspectFit"></image>
			</view>
			<view class="search-bar" style="">
				<view class="search-bar-item">
					<image src="../../static/index/search.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		<!-- 轮播 -->
		<view class="uni-padding-wrap">
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" indicator-color="#fff"
					 indicator-active-color="rgba(255, 255, 255, .3)" circular="true" :interval="interval" :duration="duration">
						<swiper-item v-for="(item,index) in items" :key='index'>
							<image class="swiper-item-img" :src="item.bgImg" mode="aspectFit"></image>
							<!-- <view class="swiper-item"></view> -->
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<!-- 九宫格 -->
		<view class="">
			<uni-grid :column="4" :show-border="false" :square="false">
				<uni-grid-item v-for="item in ugd" :key='item.name'>
					<image class="ugd-img" :src="item.src" mode=""></image>
					<text class="ugd-text">{{item.name}}</text>
				</uni-grid-item>
			</uni-grid>
		</view>
		<!-- 推荐 -->
		<view class="" style="padding: 0 10rpx;margin-top: 20rpx;">
			<view class="goods-box">
				<view class="recommend">
					<view class="recommend-left">
						<image src="../../static/shopping/seckill.png" mode=""></image>
					</view>
					<view class="mcountdown">
						<text>仅剩：</text>
						<uni-countdown color="#FFFFFF" background-color="#5ABFC9" :show-day="false" border-color="#5ABFC9" :hour="2" :minute="30"
						 :second="0"></uni-countdown>
					</view>
				</view>
				<listCommodities :lists='lists'></listCommodities>
				
				<!-- 宝妈团购 -->
				<view class="recommend">
					<view class="recommend-left">
						<image src="../../static/shopping/groupPurchase.png" mode=""></image>
					</view>
				</view>
				<list-commodities-vertical :listsV='listsV'></list-commodities-vertical>
			</view>
		</view>
	</view>
</template>

<script>
	import listCommodities from '@/components/list-commodities/list-commodities.vue'
	import listCommoditiesVertical from '@/components/list-commodities-vertical/list-commodities-vertical.vue'
	import UniGrid from '@/components/uni-grid/uni-grid.vue'
	import UniGridItem from '@/components/uni-grid-item/uni-grid-item.vue'
	import uniCountdown from '@/components/uni-countdown/uni-countdown.vue'
	export default {
		components: {
			listCommodities,
			listCommoditiesVertical,
			UniGridItem,
			UniGrid,
			uniCountdown
		},
		data() {
			return {
				items: [{
						'bgImg': '../../static/index/banner.png'
					},
					{
						'bgImg': '../../static/index/bg.png'
					}
				],
				lists: [{
						'id': '1',
						'src': require('../../static/1.png'),
						'name': '进口奶瓶进口奶瓶进口奶瓶进口奶瓶',
						'price': '88'
					},
					{
						'id': '2',
						'src': require('../../static/2.png'),
						'name': '进口奶瓶',
						'price': '88'
					},
					{
						'id': '3',
						'src': require('../../static/3.png'),
						'name': '进口奶瓶',
						'price': '88'
					}
				],
				listsV: [{
						'id': '1',
						'src': require('../../static/1.png'),
						'name': '进口奶瓶进口奶瓶进口奶瓶进口奶瓶进口奶瓶进口奶瓶进口奶瓶进口奶瓶',
						'intro': '进口奶瓶进口奶瓶进口奶瓶进口奶瓶口奶瓶进口奶瓶进口奶瓶进口奶瓶',
						'originprice': '188',
						'price': '88',
						
					},
					{
						'id': '2',
						'src': require('../../static/2.png'),
						'name': '进口奶瓶',
						'intro': '进口奶瓶进口奶瓶进口奶瓶进口奶瓶',
						'originprice': '188',
						'price': '88'
					},
					{
						'id': '3',
						'src': require('../../static/3.png'),
						'name': '进口奶瓶',
						'intro': '进口奶瓶进口奶瓶进口奶瓶进口奶瓶',
						'originprice': '188',
						'price': '88'
					}
				],
				ugd: [{
					'src': require('../../static/shopping/1.png'),
					'url': '',
					'name': '辅食营养'
				}, {
					'src': require('../../static/shopping/2.png'),
					'url': '',
					'name': '辅食食材'
				}, {
					'src': require('../../static/shopping/3.png'),
					'url': '',
					'name': '乳品零食'
				}, {
					'src': require('../../static/shopping/4.png'),
					'url': '',
					'name': '奶粉尿裤'
				}, {
					'src': require('../../static/shopping/5.png'),
					'url': '',
					'name': '厨具百货'
				}, {
					'src': require('../../static/shopping/6.png'),
					'url': '',
					'name': '宝宝用品'
				}, {
					'src': require('../../static/shopping/7.png'),
					'url': '',
					'name': '宝妈用品'
				}, {
					'src': require('../../static/shopping/8.png'),
					'url': '',
					'name': '早教用品'
				}, ],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500
			};
		}
	}
</script>

<style lang="less">
	.swiper-item-img {
		width: 100%;
		height: 100%;
	}

	.head {
		display: flex;
		justify-content: space-around;
		padding: 0 30rpx;

		.head-left {
			width: 260rpx;

			image {
				width: 152rpx;
				height: 103rpx;
			}
		}

		.search-bar {
			-webkit-flex: 1;
			flex: 1;

			.search-bar-item {
				background: #F6F6F6;
				height: 52rpx;
				margin-top: 26rpx;
				width: 400rpx;
				border-radius: 26rpx;
			}

			image {
				float: right;
				width: 32rpx;
				height: 32rpx;
				margin-top: 8rpx;
				margin-right: 20rpx;
			}
		}
	}

	.ugd-img {
		margin: 10rpx auto;
		width: 90rpx;
		height: 89rpx;
	}

	.uni-grid-item {
		margin: 20rpx 0;
	}

	.ugd-text {
		font-size: 24rpx;
		text-align: center;
	}

	.goods-box {
		border: 1px solid #f2f2f2;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		-moz-box-shadow: 0px -2px 6px #ddd;
		-webkit-box-shadow: 0px -2px 6px #ddd;
		box-shadow: 0px -2px 6px #ddd;
	}

	.recommend {
		display: flex;
		justify-content: space-between;
		padding: 10rpx 20rpx;

		.recommend-left {
			image {
				vertical-align: middle;
				width: 196rpx;
				height: 46rpx;
			}
		}
		
		.mcountdown{
			display: flex;
			justify-content:center;
			align-items:center;
			text{
				color: #5ABFC9;
				font-size: 26rpx;
			}
		}
	}
</style>
